<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>幻灯片切换广告</title>
    <link href="style/style-slider.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/player.js"></script>
    <script type="text/javascript" src="js/playerslider.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            // 焦点图片水平滚动
            $("#slider1").Xslider({
                // 默认配置
                affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
                speed: 800, //动画速度
                space: 6000, //时间间隔
                auto: true, //自动滚动
                trigger: 'mouseover', //触发事件 注意用mouseover代替hover
                conbox: '.conbox', //内容容器id或class
                ctag: 'div', //内容标签 默认为<a>
                switcher: '.switcher', //切换触发器id或class
                stag: 'a', //切换器标签 默认为a
                current:'cur', //当前切换器样式名称
                rand:false //是否随机指定默认幻灯图片
            });
            // 焦点图片垂直滚动
            $("#slider2").Xslider({
                affect:'scrolly',
                ctag: 'div',
                speed:400
            });
            // 焦点图片淡隐淡现
            $("#slider3").Xslider({
                affect:'fade',
                ctag: 'div'
            });
            // 选项卡
            $("#slider4").Xslider({
                affect:'none',
                ctag: 'div',
                speed:10
            });
        });
    </script>
</head>
<body>
<div class="main">
    <div class="matter1">
        <div class="left">
            <div id="slider3" class="slider">
                <div class="conbox">
                    <div><a href="#" title=""><img src="img/reading1.jpg" width="620" height="300"/></a></div>
                    <div><a href="#" title=""><img src="img/reading2.jpg" width="620" height="300"/></a></div>
                    <div><a href="#" title=""><img src="img/reading3.jpg" width="620" height="300"/></a></div>
                    <div><a href="#" title=""><img src="img/reading4.jpg" width="620" height="300"/></a></div>
                    <div><a href="#" title=""><img src="img/reading5.jpg" width="620" height="300"/></a></div>
                </div>
                <div class="switcher">
                    <a href="#" class="cur">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
